<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Range Selection</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="container">
        <div class="tools">
            <strong data-html="i">斜体</strong>
            <strong data-html="strong">加粗</strong>
            <strong data-html="h4">h4</strong>
            <strong data-html="span">span</strong>
            <strong data-color="red">红色</strong>
            <strong data-color="green">绿色</strong>
        </div>
    
        <div contenteditable="true" class="app">我是默认的内容，你可以修改掉</div>
    </div>


    <script>

        let temporaryRange = null;
        let temporaryString = null;

        function deleteOrReplaceSelectedContent(range, replacementNode) {
            if (range) {
                if (replacementNode) {
                    range.deleteContents();
                    range.insertNode(replacementNode);
                } else {
                    range.deleteContents();
                }
            }
        }

        /**
         * @see 做减法 
         **/
        function dealSelectTextHandler (data) {
            const { commonAncestorContainer, endOffset, temporaryString, replaceHtml, replaceColor } = data;
            if (!(temporaryString && endOffset)) return;

            const newEle = document.createElement(replaceHtml || 'span')
           
            newEle.innerHTML = replaceColor ? `<span style='color: ${replaceColor};'>${temporaryString}</span>` : temporaryString

            deleteOrReplaceSelectedContent(data, newEle)
            temporaryRange = null;
            temporaryString = null;

        }

        function getSelectRangeHandler()  {
            const selObj = window.getSelection();
            const range = selObj.getRangeAt(0);
            return range;
        }

        window.onload = () => {
            const toolsArr = document.querySelector('.tools');
            toolsArr.onclick = function(e)  {
                e.preventDefault();
                e.stopPropagation();
                if (e.target.nodeName.toLowerCase() === 'strong') {
                    const data = Object.assign((temporaryRange || {}), {
                        temporaryString,
                    })


                    const htmlStr = e.target.getAttribute('data-html')
                    const htmlColor = e.target.getAttribute('data-color')
                    data.replaceHtml = htmlStr
                    data.replaceColor = htmlColor
                    
                    dealSelectTextHandler(data)
                }
            }

            document.addEventListener('mouseup', function() {
                if (window.getSelection().toString()) {
                    temporaryString = window.getSelection().toString()
                    temporaryRange = getSelectRangeHandler()
                }
            });
        }

    </script>
</body>
</html>